<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<?php
    $ratio_width = Mage::getStoreConfig("trego_settings/product_view/ratio_width", $code);
    $ratio_height = Mage::getStoreConfig("trego_settings/product_view/ratio_height", $code);
    $ratio = $ratio_height / $ratio_width;
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<ul id="etalage">
<?php foreach ($this->getGalleryImages() as $_image): ?>
    <li>
        <img class="etalage_thumb_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(350, 350*$ratio); ?>">
        <img class="etalage_source_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(1000, 1000*$ratio)?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>">
    </li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<ul id="etalage">
    <li>
        <img class="etalage_thumb_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(350, 350*$ratio); ?>">
        <img class="etalage_source_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(1000, 1000*$ratio)?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>">
    </li>
</ul>
<?php endif; ?>
<div class="etalage-control">
    <a href="javascript:void(0)" class="etalage-prev">Previous</a>
    <a href="javascript:void(0)" class="etalage-next">Next</a>
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){
        var width = jQuery('.product-view .product-img-box').width();
        var src_img_width = 800;
        var src_img_height = 1000;
        var ratio_width = <?php echo $ratio_width; ?>;
        var ratio_height = <?php echo $ratio_height; ?>;
        
        src_img_width = 1000 * ratio_width / ratio_height;
        var height = width * ratio_height / ratio_width;

        var zoom_enabled = true;
        if(jQuery(window).width()<480)
            zoom_enabled = false;
        jQuery('#etalage').etalage({
            thumb_image_width: width,
            thumb_image_height: height,
            source_image_width: src_img_width,
            source_image_height: src_img_height,
            zoom_area_width: width,
            zoom_area_height: height,
            zoom_enable: zoom_enabled,
            smallthumb_hide_single: false,
            autoplay: false
        });
        jQuery('.product-view .product-img-box .etalage-control a').css('bottom',((jQuery('.etalage_small_thumbs').height()-25)/2)+"px");
        if(jQuery('.etalage_small_thumbs').height() == 0)
            jQuery('.product-view .product-img-box .etalage-control a').css('bottom',((jQuery('.etalage_small_thumbs img').first().height()-25)/2)+"px");
        jQuery(window).resize(function(e){
            var width = jQuery('.product-view .product-img-box').width();
            var height = width * ratio_height / ratio_width;
            zoom_enabled = true;
            if(jQuery(window).width()<480)
                zoom_enabled = false;
            jQuery('#etalage').etalage({
                thumb_image_width: width,
                thumb_image_height: height,
                source_image_width: src_img_width,
                source_image_height: src_img_height,
                zoom_area_width: width+12,
                zoom_area_height: height+12,
                zoom_enable: zoom_enabled,
                smallthumb_hide_single: false,
                autoplay: false
            });
            jQuery('.product-view .product-img-box .etalage-control a').css('bottom',((jQuery('.etalage_small_thumbs').height()-25)/2)+"px");
        });
        jQuery('.etalage-prev').on('click', function(){
            etalage_previous();
        });

        jQuery('.etalage-next').on('click', function(){
            etalage_next();
        });
    });
</script>
